<!--
 * @Author: SeonHu
 * @Date: 2025-09-28 14:19:02
 * @LastEditors: SeonHu
 * @LastEditTime: 2025-09-29 17:37:54
 * @FilePath: \bg-vben\src\views\dashboard\workbench\components\Message.vue
 * @Description: 
 * Copyright © 2020-2025 SANQING Corporation, All rights reserved.
-->
<template>
  <div ref="wrapEl">
    <Card :title="t('routes.dashboard.message.title')" v-bind="$attrs" class="workbench-message-card">
      <template #extra>
        <a-button type="link" size="small" @click="go(`/dashboard/account/center`)">更多</a-button>
      </template>

      <AdList @register="registerList" item-layout="vertical" :class="prefixCls">
        <template #avatar="{ item }">
          <Image :width="39" :height="39" :src="item.Icon" :fallback="infoImage" />
        </template>
        <template #title="{ item }">
          <a :class="`${prefixCls}__title`" @click="handlePreview(item)">
            {{ item.Title }}
          </a>
        </template>
        <template #description="{ item }">
          <div :class="`${prefixCls}__content`">
            {{ item.Content }}
          </div>
        </template>
        <template #itemExtra="{ item }">
          <div>
            <div :class="`${prefixCls}__action`">
              <Tooltip placement="top" :title="`${t('routes.system.message.isReadText')}: ${item.IsRead}`">
                <a @click="handleRead(item)">
                  <Icon
                    :class="`${prefixCls}__action-icon`"
                    :icon="item.IsRead ? 'ic:outline-mark-email-read' : 'ic:round-mark-email-unread'"
                    :color="item.IsRead ? '#018ffb' : '#ff4d4f'"
                  />
                </a>
              </Tooltip>
            </div>
            <div :class="`${prefixCls}__action`">
              <Tooltip
                placement="top"
                :title="`${t('routes.system.message.messageTypeText')}: ${
                  messageTypeEnumSchema.find((val) => {
                    return val.value === item.MessageType;
                  })?.label
                }`"
              >
                <a>
                  <Icon
                    :class="`${prefixCls}__action-icon`"
                    icon="clarity:star-line"
                    :color="
                      messageTypeEnumSchema.find((val) => {
                        return val.value === item.MessageType;
                      })?.tagColor
                    "
                  />
                </a>
              </Tooltip>
            </div>
            <div :class="`${prefixCls}__action`">
              <Tooltip
                placement="top"
                :title="`${t('routes.system.message.messageLevelText')}: ${
                  messageLevelEnumSchema.find((val) => {
                    return val.value === item.MessageLevel;
                  })?.label
                }`"
              >
                <a>
                  <Icon
                    :class="`${prefixCls}__action-icon`"
                    icon="icon-park-outline:tag"
                    :color="
                      messageLevelEnumSchema.find((val) => {
                        return val.value === item.MessageLevel;
                      })?.tagColor
                    "
                  />
                </a>
              </Tooltip>
            </div>
            <div :class="`${prefixCls}__action`">
              <span :class="`${prefixCls}__time`">{{ formatToDate(item.SendTime, 'YYYY-MM-DD HH:mm') }}</span>
            </div>

            <div :class="`${prefixCls}__action`" style="float: right">
              <Tooltip placement="top" :title="t('common.delText')">
                <a @click="handleDelete(item)">
                  <Icon :class="`${prefixCls}__action-icon`" icon="ant-design:delete-outlined" color="#ff4d4f" />
                </a>
              </Tooltip>
            </div>
          </div>
        </template>
      </AdList>
    </Card>

    <MessagePreviewModal
      @register="registerPreviewModal"
      @delete-message="reloadList"
      :close-func="handlePreviewClose"
      :ok-func="handlePreviewClose"
    />
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';

  import { deleteMessages, getMessages, readMessages } from '@/api/message';
  import infoImage from '@/assets/images/info_2x.png';
  import { AdList, useAdList } from '@/components/AdList';
  import { useModal } from '@/components/AdVxeModal';
  import Icon from '@/components/Icon/Icon.vue';
  import { useLoading } from '@/components/Loading';
  import { getMessageLevelEnumSchema } from '@/enums/messageLevelEnum';
  import { getMessageTypeEnumSchema } from '@/enums/messageTypeEnum';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useGo } from '@/hooks/web/usePage';
  import { formatToDate } from '@/utils/date';
  import MessagePreviewModal from '@/views/system/message/message/MessagePreviewModal.vue';
  import { Card, Image, Tooltip } from 'ant-design-vue';

  import { columns } from './message.data';

  const go = useGo();
  const { t } = useI18n();
  const { createMessage } = useMessage();

  const messageTypeEnumSchema = getMessageTypeEnumSchema();
  const messageLevelEnumSchema = getMessageLevelEnumSchema();

  const wrapEl = ref(null);
  const [openWrapLoading, closeWrapLoading] = useLoading({
    target: wrapEl,
    props: {
      absolute: true,
    },
  });

  const [registerList, { reload: reloadList }] = useAdList({
    heightOffset: 22,
    // 表格数据接口请求对象
    api: getMessages,
    // 表单列信息 BasicColumn[]
    columns,
    // 列表设置项
    listSetting: false,
    // 是否显示表格边框
    bordered: false,
    size: 'small',
    searchForm: false,
    // pagination: {
    //   pageSize: 3,
    //   defaultPageSize: 3,
    //   pageSizeOptions: [3],
    // },
  });

  const [registerPreviewModal, previewModalMethods] = useModal();
  /** 处理查看详情 */
  function handlePreview(record: any) {
    previewModalMethods.openModal(true, {
      record,
      request: true,
    });
  }
  /** 处理查看详情关闭 */
  async function handlePreviewClose() {
    await reloadList();
    return true;
  }

  /** 处理阅读 */
  async function handleRead(record: any) {
    // console.log(record);
    if (record && record.Id) {
      try {
        openWrapLoading();
        const result = await readMessages({
          RequestWay: 1,
          MessageIds: [record.Id],
          Read: !record.IsRead,
        });
        if (result.Succeeded) {
          createMessage.success(t('common.successText'));
          await reloadList();
        }
      } finally {
        closeWrapLoading();
      }
    }
  }

  /** 处理删除 */
  async function handleDelete(record: any) {
    // console.log(record);
    if (record && record.Id) {
      try {
        openWrapLoading();
        const result = await deleteMessages([record.Id]);
        if (result.Succeeded) {
          createMessage.success(t('common.successText'));
          await reloadList();
        }
      } finally {
        closeWrapLoading();
      }
    }
  }

  const prefixCls = 'workbench-message';
</script>

<style lang="scss">
  .workbench-message-card {
    .ant-card-body {
      padding: unset !important;
    }
  }
</style>

<style lang="scss" scoped>
  .workbench-message {
    &__title {
      margin-bottom: 12px;
      font-size: 18px;
    }

    &__content {
      // color: rgb(0 0 0 / 65%);
      font-size: 14px;
    }

    &__action {
      display: inline-block;
      padding: 0 16px;
      // color: rgb(0 0 0 / 45%);

      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3) {
        border-right: 1px solid rgb(206 206 206 / 40%);
      }

      &-icon {
        margin-right: 3px;
      }
    }

    &__time {
      // position: absolute;
      right: 20px;
      // color: rgb(0 0 0 / 45%);
    }
  }
</style>
